<template>
	<!-- <view class="header">
		<uni-search-bar style="flex: 1;" class="uni-mt-10" radius="5" placeholder="请输入关键字……" bgColor="#e8e8e8"
			clearButton="auto" cancelButton="none" @confirm="search" />
		<uni-icons @clik="iconBack" style="padding-right: 20rpx;" type="cart-filled" size="30"></uni-icons>

	</view> -->
	<view class="container">
		<!-- 侧边栏 -->
		<view class="sidebar">
			<view v-for="(item, index) in tabs" :key="index" 
				:class="['tab', { active: activeTab === index }]"
				@click="getGoodsList(item.id);activeTab=index">
				<view class="icon-wrapper">
					<image :src="activeTab === index ? item.img : item.img" 
						class="icon-img" 
						:class="{ 'active': activeTab === index }" />
				</view>
				<text class="tab-text">{{ item.type }}</text>
			</view>
		</view>
		<!-- 内容区域 -->
		<view class="content">
			<view class="rightSon">
				<view class="rightSonItem" v-for="SonItem in TypeChildren" :key="SonItem">
					<view class="category-title">
						{{SonItem.type}}
					</view>
					<view class="goodList">
						<view v-for="goodsItem in SonItem.children"  
							@click="toList(goodsItem.id)" 
							class="goodsItem">
							<view class="goods-img" 
								:style="{backgroundImage:`url(${goodsItem.goods_thumb_img})`}">
							</view>
							<view class="goods-name">{{goodsItem.goods_name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import DefaultComponent from "./components/DefaultComponent.vue"
	import {
		getTypeList,
		getTypeListByPid
	} from "../../api/index.js"
	import {
		onShow
	} from "@dcloudio/uni-app"
	const TypeChildren = ref([])
	// 侧边栏数据
	const tabs = ref([]);

	function getList(tids=0) {
		getTypeList().then(e => {
			console.log(e.data, 42)
			tabs.value = e.data
			// 根据第0条数据 获取 商品列表
			// TypeChildren.value = e.data[0].children
			// console.log(e.data[0],58)
			if(tids == 0){
				getGoodsList( e.data[0].id)
			}else{
				getGoodsList(tids)
			}
		})
	}
	function toList(id){
		uni.navigateTo({
			url: '/chanPin/pages/xiLieXiangQing?id='+id
		});
	}
	const tidTemp = ref(0);
	function getGoodsList(tid) {
		tidTemp.value = tid;
		getTypeListByPid(tid).then(e => {
			console.log(e, 63)
			TypeChildren.value = e.data
		})
	}

	onShow(() => {
		if(tidTemp.value == 0){
			getList()
		}else{
			getList(tidTemp.value)
		}
		
	})
	const reatchBack = () => {
		uni.navigateTo({
			url: '/index/pages/search/index'
		})
	}
	const iconBack = () => {
		uni.navigateTo({
			url: '/index/pages/search/index'
		})
	}
	// 当前选中的侧边栏项
	const activeTab = ref(0);

	// 切换侧边栏项
	const switchTab = (index) => {
		console.log(index)
		activeTab.value = index;
	};

	// 内容区域数据
	const list = ref([]);
</script>

<style scoped>
	.header {
		display: flex;
		align-items: center;
		height: 9vh;
	}

	.container {
		display: flex;
		height: 100vh;
		overflow: hidden;
		background-color: #f8f8f8;
	}

	.sidebar {
		width: 160rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow-y: auto;
		overflow-x: hidden;
		box-shadow: 2rpx 0 10rpx rgba(0,0,0,0.05);
	}

	.tab {
		padding: 30rpx 20rpx;
		text-align: center;
		cursor: pointer;
		width: 100%;
		transition: all 0.3s ease;
		position: relative;
	}

	.tab.active {
		background-color: #E60012;
		color: white;
	}

	.tab.active::after {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 6rpx;
		height: 100%;
		background-color: #E60012;
	}

	.icon-wrapper {
		width: 100%;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.icon-img {
		width: 90rpx;
		height: 90rpx;
		transition: all 0.3s ease;
	}

	.icon-img.active {
		transform: scale(1.1);
	}

	.tab-text {
		font-size: 26rpx;
		transition: all 0.3s ease;
	}

	.content {
		flex: 1;
		padding: 30rpx;
		background-color: #f8f8f8;
	}

	.rightSon {
		width: 100%;
		height: 100%;
		overflow-y: auto;
	}

	.category-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 20rpx;
		padding-left: 20rpx;
		border-left: 6rpx solid #E60012;
	}

	.goodList {
		margin: 20rpx 0;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}

	.goodsItem {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 16rpx;
		text-align: center;
		box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
		transition: all 0.3s ease;
		min-height: 200rpx;
	}

	.goodsItem:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1);
	}

	.goods-img {
		height: 180rpx;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		border-radius: 12rpx;
		margin-bottom: 16rpx;
	}

	.goods-name {
		font-size: 26rpx;
		color: #333;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
</style>